

<template>
	<div>
        <Breadcrumb class="bread-title" v-if="title">
			<BreadcrumbItem>{{title}}</BreadcrumbItem>
		</Breadcrumb>
		<compSearch @on-update="updateSearch" ref="search"></compSearch>
		<Table 
		:columns="columns" 
		:data="data"
		:loading="loading"
		size="small" 
		ref="table"  
		@on-sort-change='sortChange' 
		@on-selection-change='handleChecked'
		border 
		stripe></Table>
		<compSpage
        v-if="!hidePage"
		class="text-right margin-top-5"
		v-bind="{total,pageSize:formData.rows,current:formData.page}" 
		@on-update="updatePage"></compSpage>
		<Modal
        class="hidefooter"
		v-model='operate.show'
		:mask-closable='false'
		v-bind="operate">
			<component v-if="operate.show" :is="operate.component" @on-close="operate={}" v-bind="operate" @on-update="updateList"/>
			<footer slot="footer" v-show="operate.footer"></footer>
		</Modal>
		<div v-if="showDel" >
			<compDelModal @on-confirm='batchOpearte' v-bind="operate" @on-close='showDel=false'/>
		</div>
	</div>
</template>

<script>
import compUpload from '@/components/upload';
import compSpage from '@/components/spage';
import compDelModal from '@/components/delModal';

export default {
    components: {
        compSpage,
        compDelModal,
        compUpload
    },
    data() {
        return {
            hidePage: false,
            dataInherit: true,
            data: [],
            checkedId: [],
            checkedItem:[],
            loading: false,
            total: 0,
            showDel: false,
            operate: {
                id: null,
                title: "",
                show: false,
                component: null
            },
            formData: {},
        };
    },
    created() {
        this.formData = this.hidePage ? {} : {
            page: 1,
            rows: 10,
            sidx: 'id',
            sord: 'desc',
        }
    },
    computed: {

    },

    methods: {
        handleChecked(selection, row) {
            this.checkedId = selection.map(item => {
                return item.id
            });
            this.checkedItem = selection.map(item => {
                return item
            });
        },
        sortChange({ column, key, order }) {
            this.updateList({ sidx: key, sord: order });
        },
        updateSearch(data = {}) {
            if (!this.hidePage) data = { ...data, page: 1 };
            if (!this.dataInherit) {
                const { rows, sidx, sord } = this.formData;
                this.formData = this.hidePage ? {} : { rows, sidx, sord };
            }
            this.updateList(data);
        },
        updatePage(data = {}) {
            this.updateList(data);
        },
        async updateList(data) {
            this.loading = true;
            this.formData = Object.assign({}, this.formData, data);
            const response = await this.httpList(this.formData).catch(res => {
                this.loading = false;
                this.$Message.error(res.message);
            });
            if (response) {
                const data = response.data;
                this.loading = false;
                this.data = data.content || data || [];
                this.total = data.totalElements || 0;
            }
        },
    },
};
</script>



